<template>
  <div>
    <Header/>
    <div class="backred">
      <div class="sidebar">
        <div class="list">
          <div class="afafa">
            <div class="afaaalalll">
              <img src="@/assets/img/aa.png" alt="">
            </div>
            <div class="afafafasferrr">
              <h5>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h5>
              <p>参考区间：<span>99</span> 元~ <span>399</span> 元</p>
              <p>活动名额：<span>12</span> 人</p>
              <p>已参加: <span>2635</span> 人</p>
            </div>
            
          </div>
          <div class="dada">
            <div>　　价格竞猜</div>  
          </div> 
            <div class="kljj">
              <div class="iouoo">我的竞猜价格：</div>
            </div>
            <div class="code">
              <input id="first"  :disabled="bols" class="inputStyle" v-model="code[0]" type="text"/>
              <input id="second"  :disabled="bols" class="inputStyle" v-model="code[1]"  type="text"/>
              <input id="third"  :disabled="bols" class="inputStyle" v-model="code[2]"  type="text"/>
              <input id="forth"  :disabled="bols" class="inputStyle" v-model="code[3]" type="text"/>
              .
              <input id="fifth" class="inputStyle" v-model="code[4]" maxlength="1" type="text"/>
            </div>
            <div class="fetxt">（请输入参考区间内的任一数字）</div>
            <div class="afaoli">
                <div>
                   <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>二级会员</p>
                        <p>竞猜价格：122</p>
                        <p>2019.1.11</p>
                    </div>
                </div>
                 <div>
                   <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>二级会员</p>
                        <p>竞猜价格：122</p>
                        <p>2019.1.11</p>
                    </div>
                </div>
                 <div>
                   <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>二级会员</p>
                        <p>竞猜价格：122</p>
                        <p>2019.1.11</p>
                    </div>
                </div>
                 <div>
                   <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>二级会员</p>
                        <p>竞猜价格：122</p>
                        <p>2019.1.11</p>
                    </div>
                </div>
                 <div>
                   <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>二级会员</p>
                        <p>竞猜价格：122</p>
                        <p>2019.1.11</p>
                    </div>
                </div>

                 <div>
                   <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>二级会员</p>
                        <p>竞猜价格：122</p>
                        <p>2019.1.11</p>
                    </div>
                </div>
                
            </div>
          <div class="dada">
            <div>　　确认收货地址</div>  
            <div>管理收货地址　　</div>
          </div>  
          <div class="afafee">
            <div>
              <div>
                <el-radio-group v-model="radio">
                <el-radio  
                  v-for="(info,index) in Address"
                  :key="index"
                  :label="info.id"
                  
                  >
                  <div class="asfafadas">
                    <span>收件人：{{info.name}}   </span>
                    <span>联系电话： {{info.date1}} </span>
                    <span class="adveafw">收货地址：{{info.date2}} </span>
                     <span class="afafarrrr">设为默认地址</span>
                    <span class="afafarrrr" @click="EditAddress=true">修改地址</span>
                  </div>
                </el-radio>
              </el-radio-group>
              <div class="dadfaoen" @click="EditAddress=true">+新增地址</div>
              </div>
            </div>
          </div> 
          <div class="buaafahff" @click="dialogFormVisible">提交</div>


           <el-dialog title="修改地址" :visible.sync="EditAddress">
              <el-form :model="form1">
                <el-form-item label="收件人" :label-width="formLabelWidth">
                  <el-input v-model="form1.name" autocomplete="off" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                  <el-input v-model="form1.date1" autocomplete="off" style="width: 80%;"></el-input>
                </el-form-item>
               <el-form-item label="邮政编码" :label-width="formLabelWidth">
                  <el-input v-model="form1.date2" autocomplete="off" style="width: 40%;"></el-input>
                </el-form-item>    
                <el-form-item label="收货地址" :label-width="formLabelWidth">
                  <el-input type="textarea" v-model="form.desc" style="width: 60%;"></el-input>
                </el-form-item>           
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="EditAddress = false">取 消</el-button>
                <el-button type="primary" @click="EditAddress = false">确 定</el-button>
              </div>
            </el-dialog>
        </div>
         
      </div>
      
    </div>
    <Footer/>
  </div>
</template>   
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
export default {
  name: 'detail', 
  components: { 
    Header,
    Footer
  },
  data () {
    return {
      bols:false,
      tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        Address:[{
          name:'小芳',
          id:'1',
          date1:'13542658745',
          date2:'湖北省武汉市光谷广场11',
        },
        {
          name:'小芳',
          id:'2',
          date1:'13542658745',
          date2:'湖北省武汉市光谷广场22',
        },
        {
          name:'小芳',
          id:'3',
          date1:'13542658745',
          date2:'湖北省武汉市光谷广场33',
        }],
        radio:'',
        radio1:'',
        EditAddress: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        form1: {
          name: '',
          date1: '',
          date2: '',
          desc: ''
        },
        formLabelWidth: '100px',
        smsCode:'',
		    code:new Array(5),
		    codeId:['first','second','third','forth','fifth']

    }
  },
  methods: {
    dialogFormVisible() {
      this.$confirm('参加本次活动', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认提交',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '提交成功'
          });
          this.bols=true

        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '取消提交成功'
              : '提交成功'
          })
        });
      } 
  },
  watch:{
				code:function(newValue,oldValue){
					console.log('newValue.length'+newValue.length)
					let tempValue=''
					for(let i=0;i<newValue.length;i++){
						if(i==5){
							console.log(i)
							break
						}
						if(newValue[i]){
							tempValue=tempValue+newValue[i]		
						}
					}
					this.smsCode=tempValue
					console.log('smsCode '+this.smsCode)
					let m=tempValue.split("")
					let location=0
					for(let i=0;i<newValue.length;i++){
						if(m[i]&&i<5){
							location++
							newValue[i]=m[i]
						}else{
							newValue[i]=''
						}
					}
					// console.log(this.codeId[i])
					if(location<1){
						location=1
					}else if(location>5){
						location=5
					}
					document.getElementById(this.codeId[location-1]).focus()
				}
			},

}
</script> 
<style scoped>
.el-radio-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.onemo {
  margin-left: 15px;
}
.onemo  >>> .el-radio__input.is-checked .el-radio__inner {
    border-color: #f06048;
    background: #f06048;
}
.onemo >>> .el-radio__input.is-checked+.el-radio__label{
  color: #f06048
}
.onemo >>> .el-radio {
  display: flex
}
.afafee >>> .el-radio__input.is-checked .el-radio__inner {
    border-color: #f06048;
    background: #f06048;
}
.afafee >>> .el-radio__input.is-checked+.el-radio__label{
  color: #f06048
}
.dialog-footer {
  display: flex;
  justify-content: center;  
}
.dadfaoen {
  height: 30px;
  line-height: 30px;
  width: 85px;
  border: 1px solid rgb(182, 182, 182);
  text-align: center;
  display: inline-block;
  margin-top: 26px;
  margin-left: 23px;
  cursor: pointer;  
  color:#676767
}
.dadfaoen:hover {
  box-shadow: 0px 1px 1px rgba(0,0,0,0.15);  
  background-color: #f06048;
  color:#fff;
  border: 1px solid #f06048;
}
.el-radio {
  margin-top: 12px;
}
.el-radio__input {
      position: relative;
    top: -12px;
    line-height: 68px;
}
.backred {
  background-color: #f06048;
  display: flex;
  justify-content: space-between;
}
.sidebar {
  width: 1200px;
  margin: 5px auto;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
}
.afafa {
  display: flex;
  margin-top: 35px;
  margin-left: 20px;
}
.list {
  width: 1160px;
  margin: 0 auto;
}
.afaaalalll img {
  width: 190px;
  height: 190px;
  	box-shadow: 0px 2px 10px 0px 
		rgba(22, 22, 22, 0.2);
}
.afafafasferrr {
  margin-left: 50px;
  margin-top: 20px;
}
.afafafasferrr h5{
  font-size: 22px;
  margin-bottom: 20px;
}
.afafafasferrr p{
  line-height: 30px;
  font-size: 16px
}
.afafafasferrr span{
  font-size: 18px;
  color: #f06048;
  font-weight: 700;
}
.dada {
  width: 1160px;
	height: 40px;
	background-color: #eeeeee;
  margin: 20px auto;
  display: flex;
  line-height: 40px;
  justify-content: space-between;
}
.asfafadas{
	width: 1060px;
	height: 40px;
	background-color: #eeeeee;
  display: inline-block;
}
.asfafadas span{
  line-height: 40px;
  margin-right: 50px;
  margin-left: 10px;
}
.asfafadas .afafarrrr {
  color:#167dd8
}
.buaafahff{
  	width: 136px;
	height: 36px;
	background-color: #f06048;
	border-radius: 4px;
  line-height: 36px;
  text-align: center;
  color: #fff;
  margin: 150px auto;
  cursor: pointer;
}
.adveafw {
  width: 380px;
  display: inline-block
}
.afafiiei {
  font-size: 18px
}
.afafiiei i {
  margin: 0 4px;
}
.aodaodo {
    display: flex;

}
.ofernf {
  font-size: 18px;
  margin-top: 5px;
  margin-left: 10px;
}
.iouoo {
  width: 200px;
	height: 40px;
  line-height: 40px;
  text-align: center;
	background-color: #f06048;
	border-radius: 20px;
  font-family: SourceHanSansCN-Regular;
	font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ffffff;
  margin-left: 15px;
}
.code {
  margin-left: 400px;
  font-size: 24px
}
.inputStyle {
    width: 30px;
    height: 40px;
    border: 2px solid #f06048;
    font-size: 24px;
    padding-left: 10px;
    color: #525252ee;
}
.fetxt {
  	font-family: SourceHanSansCN-Regular;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 27px;
	letter-spacing: 0px;
	color: #a0a0a0;
  margin-left: 410px;
}
.afaoli {
  width: 1070px;
	height: 137px;
	background-color: #f060488f;
	border-radius: 6px;
  margin: 20px auto;
  margin-bottom: 100px;
  float: left;
}
.afaoli div{
  width: 500px;
  height: 30px;
  display: inline-block;
  margin-top: 3px;
}
.o_lister {
  width: 500px;
  height: 28px;
  line-height: 28px;
  margin-left: 10px;
  background-color: #676767
}
.list_ons img {
	width: 28px;
	height: 28px;
	background-color: #dcdcdc;
  border-radius: 50%;
  position: relative;
  left: 11px;
  top: 7px;
}
.list_ons p {
  margin-left: 20px;
  line-height: 28px;
  font-size: 18px;
  display: inline-block;
  color: #fff
}
</style>